import React from 'react';
import './App.css'; // 确保引入样式文件
import {Routes, Route, Link,useNavigate } from 'react-router-dom';
import Home from './pages/Home'; // 确保这个文件存在
import ScriptDetail from './pages/ScriptDetail'; // 确保这个文件存在
import Register from './pages/Register'; // 确保导入注册页面
import LoginPage from './pages/LoginPage'; // 确保导入注册页面
import EditorPage from './pages/EditorPage';
function App() {
  const navigate = useNavigate();
  return (

    <div className="app">
      {/* 顶部导航栏 */}
      <header style={{
        backgroundColor: 'black',
        color: 'white',
        padding: '10px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        flexWrap: 'nowrap', // 禁止换行
        // overflowX: 'auto', // 允许水平滚动（防止溢出）
      }}>
        {/* 左侧网站名称 */}
        <div style={{
          display: 'flex',
          alignItems: 'center',
          gap: '35px', // 控制 "首页" 和 "看本" 之间的间距
        }}>
          <h1 style={{ margin: 0, whiteSpace: 'nowrap' }}>PIA戏</h1> {/* 禁止换行 */}
          <nav style={{ display: 'flex', gap: '20px', whiteSpace: 'nowrap' }}>
            <Link
               to="/editor"  // 修改为路由路径，不是文件路径
              style={{
                color: 'white',
                textDecoration: 'none',
                padding: '5px 10px',
                borderRadius: '4px',
                transition: 'background-color 0.3s',
              }}
              onMouseOver={(e) => e.currentTarget.style.backgroundColor = '#333'}
              onMouseOut={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
            >
              首页
              </Link>
          

            <Link
             to="/home"  // 修改为路由路径，不是文件路径
              style={{
                color: 'white',
                textDecoration: 'none',
                padding: '5px 10px',
                borderRadius: '4px',
                transition: 'background-color 0.3s',
              }}
              onMouseOver={(e) => e.currentTarget.style.backgroundColor = '#333'}
              onMouseOut={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
            >
              看本
              </Link>
          </nav>
          {/* 搜索栏紧贴 "看本"，并保持固定间距 */}
          <div style={{
            marginLeft: '30px',
            position: 'relative',
          }}>
            {/* 放大镜图标（SVG） */}
            <svg
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#999"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              style={{
                position: 'absolute',
                left: '12px',
                top: '50%',
                transform: 'translateY(-50%)',
                pointerEvents: 'auto',
                cursor: 'default', // 鼠标悬停时显示为手型
              }}
            >
              <circle cx="11" cy="11" r="8" />
              <line x1="21" y1="21" x2="16.65" y2="16.65" />
            </svg>

            {/* 搜索框 */}
            <input
              type="text"
              placeholder="请输入搜索内容..."
              style={{
                padding: '10px 15px 10px 40px',
                fontSize: '16px',
                width: '200px',
                borderRadius: '20px',
                border: '1px solid #ccc',
                outline: 'none',
                boxShadow: '0 2px 5px rgba(0, 0, 0, 0.1)',
                transition: 'all 0.3s ease',
              }}
              onFocus={(e) => {
                e.target.style.borderColor = '#61DAFB';
                e.target.style.boxShadow = '0 0 8px rgba(97, 218, 251, 0.5)';
              }}
              onBlur={(e) => {
                e.target.style.borderColor = '#ccc';
                e.target.style.boxShadow = '0 2px 5px rgba(0, 0, 0, 0.1)';
              }}
              onMouseEnter={(e) => {
                // 只有当鼠标不在 SVG 上时，才改变背景色
                if (!e.currentTarget.contains(document.elementFromPoint(e.clientX, e.clientY))) {
                  e.target.style.backgroundColor = '#f9f9f9';
                }
              }}
              onMouseLeave={(e) => {
                // 只有当鼠标不在 SVG 上时，才恢复背景色
                if (!e.currentTarget.contains(document.elementFromPoint(e.clientX, e.clientY))) {
                  e.target.style.backgroundColor = 'white';
                }
              }}
            />
          </div>
          </div>
          {/* 右侧导航按钮 */}
          <div style={{
            display: 'flex', // 使用 flex 布局
            alignItems: 'center', // 垂直居中
            gap: '8px', // 控制按钮之间的间距
            marginLeft: 'auto', // 关键：将整个按钮组推到右侧
            marginLeft: '30px', // 新增：与左侧内容保持间距（覆盖 auto）
          }}>
            {/* 登录按钮 */}
            <button
              onClick={() => navigate('/login')} // 导航到登陆页
              style={{
                color: 'white',
                position: 'relative',
                whiteSpace: 'nowrap',
                backgroundColor: 'transparent',
                padding: '8px 15px',
                borderRadius: '20px',
                cursor: 'pointer',
                transition: 'all 0.3s ease',
                border: '1px solid rgba(255, 255, 255, 0.2)', // 细边框
                boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)', // 轻微阴影
              }}
              onMouseOver={(e) => {
                e.currentTarget.style.backgroundColor = 'rgba(102, 107, 109, 0.7)'; // 悬停时半透明蓝色背景
              }}
              onMouseOut={(e) => {
                e.currentTarget.style.backgroundColor = 'transparent'; // 恢复
              }}
            >
              登录
            </button>

            {/* 注册按钮 */}
            <button
               onClick={() => navigate('/register')} // 导航到注册页
              style={{
                color: 'white',
                whiteSpace: 'nowrap',
                backgroundColor: 'transparent',
                padding: '8px 15px',
                borderRadius: '20px',
                cursor: 'pointer',
                transition: 'all 0.3s ease',
                border: '1px solid rgba(255, 255, 255, 0.2)', // 细边框
                boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)', // 轻微阴影
              }}
              onMouseOver={(e) => {
                e.currentTarget.style.backgroundColor = 'rgba(102, 107, 109, 0.7)'; // 悬停时半透明蓝色背景
              }}
              onMouseOut={(e) => {
                e.currentTarget.style.backgroundColor = 'transparent'; // 恢复
              }}
            >
              注册
            </button>
          </div>
       
      </header>



      {/* 路由配置 */}
      <Routes>
        <Route path="/home" element={<Home />} /> {/* Home 页面路由 */}
        <Route path="/ScriptDetail" element={<ScriptDetail />} /> {/* 默认路由 */}
        <Route path="/register" element={<Register />} /> {/* 注册页面路由 */}
        <Route path="/login" element={<LoginPage />} />
        <Route path="/editor" element={<EditorPage />} />
      </Routes>
    </div>


  );
}

export default App;